<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>父子组件传值</title>
</head>

<body>
    <h1>父子组件传值</h1>
    <ol>
        <li></li>
    </ol>
    <hr />
    <div id="demoReact"></div>
    <script src="../../node_modules/babel-standalone/babel.min.js"></script>
    <script src="../../node_modules/react/umd/react.development.js"></script>
    <script src="../../node_modules/react-dom/umd/react-dom.development.js"></script>
    <script type="text/babel">

        let bool = true;

        let SubCom = (props) => {
            return (
                <div style={{ display: props.show ? "block" : "none" }}>
                    我是子组件
                    {
                        props.arr.map((v, i) => {
                            return <p key={i}>{v}</p>
                        })
                    }
                </div>
            )
        }

        let dataArr = ["姜", "葱", "蒜"];

        let Com = () => {
            return (
                <div>
                    <h1 onClick={() => { bool = !bool;render() }}>蔬菜展示</h1>
                    <SubCom arr={dataArr} show={bool}/>
                </div>
            )
        }

        function render() {
            ReactDOM.render(<Com />, document.getElementById("demoReact"));
        }

        render();
    </script>
</body>

</html>